<template>
	<view class="home">
		<view class="t_content">
			<!-- 背景 -->
			<view class="top_left" @click="showWhite"></view>
			<view class="top_right" :animation="bgAni" @click="showBlack"></view>
			<!-- 中文单词 -->
			<view class="chinese" :animation="chAni" @click="showTaiJi">
				{{curr.chinese || '?'}}
			</view>
			<!-- 英文单词-白 -->
			<view class="english_white" :animation="enWAni" @click="showWhite">{{curr.english1 || '?'}}</view>
			<!-- 例句-白 -->
			<view class="exam-white" :animation="enWBodyAni">
				<scroll-view class="exam-body" scroll-y>
					<view class="exam-cn">例句：{{curr.eng1_eg1_cn || '?'}}</view>
					<view class="exam-eng">{{curr.eng1_eg1_en || '?'}}</view>
					<view class="exam-cn">例句：{{curr.eng1_eg2_cn || '?'}}</view>
					<view class="exam-eng">{{curr.eng1_eg2_en || '?'}}</view>
					<view class="exam-cn">例句：{{curr.eng1_eg3_cn || '?'}}</view>
					<view class="exam-eng">{{curr.eng1_eg3_en || '?'}}</view>
					<view style="height:50rpx;"></view>
				</scroll-view>
			</view>
			<!-- 英文单词-黑 -->
			<view class="english_black" :animation="enBAni" @click="showBlack">{{curr.english2 || '?'}}</view>
			<!-- 例句黑 -->
			<view class="exam-black" :animation="enBBodyAni">
				<scroll-view class="exam-body" scroll-y>
					<view class="exam-cn">例句：{{curr.eng2_eg1_cn || '?'}}</view>
					<view class="exam-eng">{{curr.eng2_eg1_en || '?'}}</view>
					<view class="exam-cn">例句：{{curr.eng2_eg2_cn || '?'}}</view>
					<view class="exam-eng">{{curr.eng2_eg2_en || '?'}}</view>
					<view class="exam-cn">例句：{{curr.eng2_eg3_cn || '?'}}</view>
					<view class="exam-eng">{{curr.eng2_eg3_en || '?'}}</view>
					<view style="height:50rpx;"></view>
				</scroll-view>
			</view>
		
		</view>
		<view class="b_content">
			<view class="bottom-left" @click="go('issue')">
				两 三
			</view>
			<view class="bottom-right"  @click="go('completes')">
				万 物
			</view>
			<view class="bottom_center" @click="go('form')">
				壹
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'home',
		data () {
			return {
				curr: {},
				aniBG: undefined,
				bgAni: {}, // 背景
				aniCH: undefined, 
				chAni: {}, // 汉子
				aniEnW: undefined,
				enWAni: {}, // 英文-白
				aniEnBodyW: undefined,
				enWBodyAni: {}, // 例子-白
				aniEnB: undefined,
				enBAni: {}, // 英文-黑
				aniEnBodyB: undefined,
				enBBodyAni: {},  // 例子-黑
			}
		},
		onReady () {
			this.initAni()
		},
		onShow () {
			this.getCurr()
		},
		methods: {
			go (page) {
				if (page == 'form') {
					try {
						uni.setStorageSync('update', '')
					}catch(e){}
				}
				setTimeout(() => {
					uni.navigateTo({
					    url: '../'+page+'/'+page,
						animationType: 'pop-in',
						animationDuration: 300
					});
				}, 0)
			},
			// 获取当前单词
			getCurr () {
				try {
				    let curr = uni.getStorageSync('curr')
					if (curr) {
						this.curr = curr
					} else {
						let list = uni.getStorageSync('words')
						let curr = {}
						while(!curr.chinese || !curr.english1 || !curr.english2) {
							let n = Math.floor(Math.random() * list.length)
							curr = list[n]
						}
						this.curr = curr
					}
				} catch (e) {
				    console.log('获取缓存出错', e)
				}
			},
			// 初始化动画
			initAni () {
				this.aniBG = uni.createAnimation({
				  duration: 800,
				  timingFunction: "ease",
				  delay: 0
				})
				this.aniCH = uni.createAnimation({
				  duration: 600,
				  timingFunction: "ease",
				  delay: 0
				})
				this.aniEnW = uni.createAnimation({
				  duration: 700,
				  timingFunction: "ease",
				  delay: 0
				})
				this.aniEnB = uni.createAnimation({
				  duration: 700,
				  timingFunction: "ease",
				  delay: 0
				})
				this.aniEnBodyW  = uni.createAnimation({
				  duration: 700,
				  timingFunction: "ease",
				  delay: 0
				})
				this.aniEnBodyB = uni.createAnimation({
				  duration: 700,
				  timingFunction: "ease",
				  delay: 0
				})
			},
			// 展示黑
			showBlack () {
				this.aniBG.top("-60%").step()
				this.bgAni = this.aniBG.export()
				this.aniCH.top("8%").left("68%").step()
				this.chAni = this.aniCH.export()
				this.aniEnW.scale(0).step()
				this.enWAni = this.aniEnW.export()
				this.aniEnB.translateY("20px").scale(1.2).step()
				this.enBAni = this.aniEnB.export()
				this.aniEnBodyW.scale(0).step()
				this.enWBodyAni = this.aniEnBodyW.export()
				this.aniEnBodyB.scale(1).step()
				this.enBBodyAni = this.aniEnBodyB.export()
			},
			// 展示白
			showWhite () {
				this.aniBG.top("60%").step()
				this.bgAni = this.aniBG.export()
				this.aniCH.top("80%").left("30%").step()
				this.chAni = this.aniCH.export()
				this.aniEnW.translateY("-20px").scale(1.2).step()
				this.enWAni = this.aniEnW.export()
				this.aniEnB.scale(0).step()
				this.enBAni = this.aniEnB.export()
				this.aniEnBodyW.scale(1).step()
				this.enWBodyAni = this.aniEnBodyW.export()
				this.aniEnBodyB.scale(0).step()
				this.enBBodyAni = this.aniEnBodyB.export()
			},
			// 展示太极
			showTaiJi () {
				this.aniBG.top("0%").step()
				this.bgAni = this.aniBG.export()
				this.aniCH.top("43%").left("50%").step()
				this.chAni = this.aniCH.export()
				this.aniEnW.scale(1).translateY("0").step()
				this.enWAni = this.aniEnW.export()
				this.aniEnB.scale(1).translateY("0").step()
				this.enBAni = this.aniEnB.export()
				this.aniEnBodyW.scale(0).step()
				this.enWBodyAni = this.aniEnBodyW.export()
				this.aniEnBodyB.scale(0).step()
				this.enBBodyAni = this.aniEnBodyB.export()
			}
		} 
	}
</script>

<style scoped>
	.home {
		width:100%;
		height:100%;
		background-color: #222;
		overflow: hidden;
		position: relative;
	}
	.t_content {
		width: 100%;
		height: calc(100% - 120rpx);
	}
	.top_left {
		width:200%;
		height: 200%;
		left: -60%;
		top: -50%;
		background-color: #fff;
		position: absolute;
		z-index: 0;
		transform: rotate(36deg);
	}
	.top_right {
		width:200%;
		height: 200%;
		background-color: #000;
		top: 0%;
		left: 0%;
		position: absolute;
		z-index: 1;
		transform: rotate(36deg);
	}
	.b_content {
		width:100%;
		height: 120rpx;
		text-align: center;
		position: relative;
		z-index: 99;
		color: #fff;
		font-size: 44rpx;
		line-height:108rpx;
		background-color: #222;
		box-shadow: inset 0 2rpx 10rpx #000, inset 0 2rpx 10rpx #fff;
	}
	.bottom-left {
		width:40%;
		height: 100%;
		float: left;
	}
	.bottom-right {
		width:40%;
		height: 100%;
		float: right;
	}
	.bottom_center {
		position:absolute;
		width: 160rpx;
		height:160rpx;
		border-radius: 50%;
		background-color: #c02c38;
		left:calc(50% - 80rpx);
		bottom: 40rpx;
		font-size: 72rpx;
		line-height: 152rpx;
		box-shadow:  0 0 12rpx #c02c38, 0 0 10rpx #c02c38;
	}
</style>

<style scoped>
	.chinese {
		position: absolute;
		padding: 10rpx 20rpx;
		width:90%;
		text-align: center;
		font-size: 120rpx;
		mix-blend-mode: difference;
		font-weight: 100;
		font-family: 楷体;
		text-shadow: 8rpx 8rpx 2rpx #fff;
		left: 50%;
		top: 43%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 98;
	}
	.english_white {
		color: #000;
		position: absolute;
		font-size: 80rpx;
		text-shadow: 2rpx 2rpx 8rpx #333;
		top: 100rpx;
		left:60rpx;
		z-index: 99;
	}
	.english_black {
		color: #fff;
		position: absolute;
		font-size: 80rpx;
		text-shadow: 2rpx 2rpx 8rpx #fff;
		bottom: 300rpx;
		right:60rpx;
		z-index: 99;
	}
	.exam-white {
		position:absolute;
		z-index: 98;
		color:#000;
		width:90%;
		height:55%;
		top: 18%;
		left:5%;
		transform: scale(0);
	}
	.exam-black {
		position:absolute;
		z-index: 98;
		color:#000;
		width:90%;
		height:55%;
		top: 16%;
		left:5%;
		transform: scale(0);
	}
	.exam-body {
		width:100%;
		height:100%;
		font-size: 18px;
	}
	.exam-cn {
		color: #999;
	}
	.exam-eng {
		margin-bottom:60rpx;
	} 
	.exam-white .exam-eng {
		color: #000;
	}
	.exam-black .exam-eng {
		color: #fff;
	}
</style>
